<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>走近非遗 - 中华非遗</title>
    <link rel="stylesheet" href="styles/main.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        /**
         * 精简现代化专业样式设计
         */
        
        /* 页面主体样式 */
        .theme-explore {
            --explore-primary: #1a365d;
            --explore-secondary: #2d5f8c;
            --explore-accent: #4a9eff;
            --explore-light: #f8fafc;
            --explore-card-bg: #ffffff;
            --explore-text: #1a202c;
            --explore-text-light: #64748b;
            background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
            min-height: 100vh;
        }

        /* 现代化页面头部 */
        .explore-hero {
            background: linear-gradient(135deg, var(--explore-primary) 0%, var(--explore-secondary) 100%);
            color: white;
            padding: 120px 0 100px;
            position: relative;
            overflow: hidden;
        }

        .explore-hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="0.5" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="0.5" fill="white" opacity="0.1"/><circle cx="50" cy="50" r="0.3" fill="white" opacity="0.05"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
            opacity: 0.3;
        }

        .explore-hero-content {
            position: relative;
            z-index: 2;
            text-align: center;
            max-width: 800px;
            margin: 0 auto;
        }

        .explore-hero h1 {
            font-size: 3.5rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
            background: linear-gradient(135deg, #ffffff 0%, #e2e8f0 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-shadow: 0 4px 20px rgba(0,0,0,0.3);
        }

        .explore-hero p {
            font-size: 1.25rem;
            opacity: 0.9;
            margin-bottom: 2rem;
            line-height: 1.6;
        }

        /* 精选项目展示 */
        .projects-showcase {
            padding: 80px 0;
        }

        .showcase-title {
            text-align: center;
            margin-bottom: 4rem;
        }

        .showcase-title h2 {
            font-size: 2.8rem;
            font-weight: 700;
            color: var(--explore-primary);
            margin-bottom: 1rem;
            position: relative;
        }

        .showcase-title h2::after {
            content: '';
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: linear-gradient(90deg, var(--explore-accent), var(--explore-secondary));
            border-radius: 2px;
        }

        .showcase-title p {
            font-size: 1.2rem;
            color: var(--explore-text-light);
            max-width: 700px;
            margin: 0 auto;
            line-height: 1.7;
        }

        /* 项目网格布局 */
        .projects-grid-refined {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 2.5rem;
            margin-top: 4rem;
        }

        /* 高级项目卡片设计 */
        .heritage-card-premium {
            position: relative;
            height: 320px;
            border-radius: 24px;
            overflow: hidden;
            box-shadow: 0 15px 50px rgba(26, 54, 93, 0.15);
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
            background: #ffffff;
        }

        .heritage-card-premium::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(26, 54, 93, 0.3) 0%, rgba(45, 95, 140, 0.5) 100%);
            z-index: 2;
            transition: all 0.4s ease;
        }

        .heritage-card-premium:hover::before {
            background: linear-gradient(135deg, rgba(26, 54, 93, 0.2) 0%, rgba(45, 95, 140, 0.3) 100%);
        }

        .heritage-card-premium:hover {
            transform: translateY(-15px) scale(1.02);
            box-shadow: 0 25px 70px rgba(26, 54, 93, 0.25);
        }

        /* 背景图片 */
        .card-background {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            transition: transform 0.5s ease;
        }

        .heritage-card-premium:hover .card-background {
            transform: scale(1.1);
        }

        /* 特定背景图片 */
        .card-piying .card-background {
            background-image: url('img/皮影.jpg');
        }

        .card-tea .card-background {
            background-image: url('img/英德红茶.jpg');
        }

        .card-sculpture .card-background {
            background-image: url('img/大吴泥塑.jpg');
        }

        .card-dragon .card-background {
            background-image: url('img/龙舟.jpg');
        }

        /* 内容区域 */
        .card-content-premium {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 2rem;
            z-index: 3;
            background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
        }

        /* 教学方法标签 */
        .teaching-method {
            display: inline-block;
            background: linear-gradient(135deg, var(--explore-accent), var(--explore-secondary));
            color: white;
            padding: 8px 20px;
            border-radius: 25px;
            font-size: 0.85rem;
            font-weight: 600;
            margin-bottom: 1rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            box-shadow: 0 4px 15px rgba(74, 158, 255, 0.3);
        }

        /* 项目标题 */
        .heritage-title {
            font-size: 1.8rem;
            font-weight: 700;
            color: white;
            margin-bottom: 0.8rem;
            position: relative;
            display: inline-block;
        }

        .heritage-title::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 60%;
            height: 3px;
            background: linear-gradient(90deg, var(--explore-accent), transparent);
            border-radius: 2px;
        }

        /* 项目描述 */
        .heritage-description {
            color: rgba(255, 255, 255, 0.9);
            line-height: 1.6;
            font-size: 1rem;
            margin-bottom: 1.5rem;
        }

        /* 项目元信息 */
        .heritage-meta {
            display: flex;
            gap: 1.5rem;
            font-size: 0.9rem;
            color: rgba(255, 255, 255, 0.8);
        }

        .meta-item-premium {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .meta-item-premium i {
            color: var(--explore-accent);
            font-size: 1rem;
        }

        /* 体验区域现代化 */
        .experience-modern {
            background: white;
            padding: 80px 0;
            margin-top: 60px;
            position: relative;
        }

        .experience-modern::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(248, 250, 252, 0.8) 0%, rgba(226, 232, 240, 0.3) 100%);
            z-index: 1;
        }

        .experience-content {
            position: relative;
            z-index: 2;
        }

        .experience-grid-modern {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }

        .experience-card-modern {
            background: white;
            border-radius: 16px;
            padding: 2rem;
            text-align: center;
            box-shadow: 0 8px 30px rgba(26, 54, 93, 0.08);
            transition: all 0.3s ease;
            border: 1px solid rgba(226, 232, 240, 0.5);
        }

        .experience-card-modern:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 50px rgba(26, 54, 93, 0.12);
        }

        .experience-icon-modern {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, var(--explore-accent), var(--explore-secondary));
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem;
        }

        .experience-icon-modern i {
            font-size: 2rem;
            color: white;
        }

        .experience-card-modern h3 {
            font-size: 1.3rem;
            font-weight: 700;
            color: var(--explore-text);
            margin-bottom: 1rem;
        }

        .experience-card-modern p {
            color: var(--explore-text-light);
            line-height: 1.6;
            margin-bottom: 1.5rem;
        }

        .explore-btn {
            background: linear-gradient(135deg, var(--explore-accent) 0%, var(--explore-secondary) 100%);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 10px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            width: 100%;
            font-size: 0.95rem;
        }

        .explore-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 25px rgba(74, 158, 255, 0.3);
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .explore-hero h1 {
                font-size: 2.5rem;
            }
            
            .projects-grid-refined {
                grid-template-columns: 1fr;
                gap: 2rem;
            }
            
            .heritage-card-premium {
                height: 280px;
            }
            
            .heritage-title {
                font-size: 1.5rem;
            }
            
            .showcase-title h2 {
                font-size: 2.2rem;
            }
        }

        /* 动画效果 */
        .fade-in-up {
            opacity: 0;
            transform: translateY(30px);
            animation: fadeInUp 0.8s ease forwards;
        }

        .heritage-card-premium:nth-child(1) { animation-delay: 0.1s; }
        .heritage-card-premium:nth-child(2) { animation-delay: 0.2s; }
        .heritage-card-premium:nth-child(3) { animation-delay: 0.3s; }
        .heritage-card-premium:nth-child(4) { animation-delay: 0.4s; }

        @keyframes fadeInUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    </style>
</head>
<body class="theme-explore">
    <!-- 导航栏组件容器 -->
    <div id="navbar-container"></div>

    <!-- 主要内容区域 -->
    <main>


        <!-- 精选项目展示 -->
        <section class="projects-showcase">
            <div class="container">
                <div class="showcase-title">
                    <h2>精选非遗项目</h2>
                    <p>每一项非物质文化遗产都承载着深厚的历史文化内涵，结合现代教学方法传承文化精髓</p>
                </div>
                
                <div class="projects-grid-refined">
                    <!-- 皮影戏 + 探究式教学 -->
                    <div class="heritage-card-premium card-piying fade-in-up">
                        <div class="card-background"></div>
                        <div class="card-content-premium">
                            <span class="teaching-method">探究式教学</span>
                            <h3 class="heritage-title">皮影戏传统技艺</h3>
                            <p class="heritage-description">始于西汉，兴于唐宋，盛于清代的古老戏曲艺术形式，以光影的魅力演绎人生百态，传承千年文化精髓</p>
                            <div class="heritage-meta">
                                <div class="meta-item-premium">
                                    <i class="fas fa-map-marker-alt"></i>
                                    <span>陕西华县</span>
                                </div>
                                <div class="meta-item-premium">
                                    <i class="fas fa-clock"></i>
                                    <span>西汉起源</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 英德红茶 + 项目式教学 -->
                    <div class="heritage-card-premium card-tea fade-in-up">
                        <div class="card-background"></div>
                        <div class="card-content-premium">
                            <span class="teaching-method">项目式教学</span>
                            <h3 class="heritage-title">英德红茶制作技艺</h3>
                            <p class="heritage-description">广东英德特产，采用独特的发酵工艺，茶汤红艳明亮，香气浓郁持久，享誉海内外的茶叶瑰宝</p>
                            <div class="heritage-meta">
                                <div class="meta-item-premium">
                                    <i class="fas fa-map-marker-alt"></i>
                                    <span>广东英德</span>
                                </div>
                                <div class="meta-item-premium">
                                    <i class="fas fa-clock"></i>
                                    <span>明代传承</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 大吴泥塑 + 问题式教学 -->
                    <div class="heritage-card-premium card-sculpture fade-in-up">
                        <div class="card-background"></div>
                        <div class="card-content-premium">
                            <span class="teaching-method">问题式教学</span>
                            <h3 class="heritage-title">大吴泥塑传统技艺</h3>
                            <p class="heritage-description">以泥土为原料，运用传统手工技法塑造各种形象，工艺精湛，形神兼备，富有浓郁的民间特色</p>
                            <div class="heritage-meta">
                                <div class="meta-item-premium">
                                    <i class="fas fa-map-marker-alt"></i>
                                    <span>江苏无锡</span>
                                </div>
                                <div class="meta-item-premium">
                                    <i class="fas fa-clock"></i>
                                    <span>明清兴盛</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 龙舟 + 项目式教学 -->
                    <div class="heritage-card-premium card-dragon fade-in-up" onclick="window.location.href='longzhou-teaching.html'">
                        <div class="card-background"></div>
                        <div class="card-content-premium">
                            <span class="teaching-method">项目式教学</span>
                            <h3 class="heritage-title">龙舟竞渡传统</h3>
                            <p class="heritage-description">端午佳节的重要民俗活动，承载着深厚的历史文化内涵和团结协作的精神品质，传承民族精神</p>
                            <div class="heritage-meta">
                                <div class="meta-item-premium">
                                    <i class="fas fa-map-marker-alt"></i>
                                    <span>全国各地</span>
                                </div>
                                <div class="meta-item-premium">
                                    <i class="fas fa-clock"></i>
                                    <span>战国时期</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>


    </main>

    <!-- 页面底部 -->
    <footer class="main-footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-section">
                    <h4>关于我们</h4>
                    <p>致力于保护和传承中华民族非物质文化遗产</p>
                </div>
                <div class="footer-section">
                    <h4>快速链接</h4>
                    <ul>
                        <li><a href="about.html">认识非遗</a></li>
                        <li><a href="explore.html">走近非遗</a></li>
                        <li><a href="heritage.html">传习非遗</a></li>
                    </ul>
                </div>
                <div class="footer-section">
                    <h4>联系我们</h4>
                    <p>邮箱: info@heritage.cn</p>
                    <p>电话: 010-12345678</p>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2024 中华非遗. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <!-- AI对话按钮 -->
    <button class="ai-chat-button" id="aiChatButton" title="AI助手">
        <i class="fas fa-robot"></i>
    </button>

    <!-- AI对话弹窗 -->
    <div class="ai-chat-modal" id="aiChatModal">
        <div class="ai-chat-window">
            <!-- 对话窗口头部 -->
            <div class="ai-chat-header">
                <div class="ai-chat-title">
                    <i class="fas fa-robot"></i>
                    <span>非遗索思AI助手</span>
                </div>
                <button class="ai-chat-close" title="关闭">
                    <i class="fas fa-times"></i>
                </button>
            </div>

            <!-- 对话消息区域 -->
            <div class="ai-chat-messages">
                <!-- 消息将通过JavaScript动态添加 -->
            </div>

            <!-- 输入区域 -->
            <div class="ai-chat-input-area">
                <textarea 
                    class="ai-chat-input" 
                    id="chatInput" 
                    placeholder="请输入您想了解的非遗问题..."
                    rows="1"
                ></textarea>
                <button class="ai-chat-send" id="chatSend" title="发送">
                    <i class="fas fa-paper-plane"></i>
                </button>
            </div>
        </div>
    </div>

    <!-- JavaScript脚本 -->
    <script src="scripts/ai-chat-final.js"></script>
    <script src="scripts/navbar-component.js"></script>
    <script>
        // 初始化导航栏并设置当前页面
        initNavbar();
        setActiveNavPage('explore.html');
    </script>
    <script>
        /**
         * 精简交互功能
         */
        document.addEventListener('DOMContentLoaded', function() {
            // 滚动动画
            const observerOptions = {
                threshold: 0.1,
                rootMargin: '0px 0px -50px 0px'
            };

            const observer = new IntersectionObserver(function(entries) {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.style.opacity = '1';
                        entry.target.style.transform = 'translateY(0)';
                    }
                });
            }, observerOptions);

            // 观察所有需要动画的元素
            const animatedElements = document.querySelectorAll('.fade-in-up');
            animatedElements.forEach(el => observer.observe(el));

            // 导航栏滚动效果
            window.addEventListener('scroll', function() {
                const header = document.querySelector('.main-header');
                if (window.scrollY > 100) {
                    header.classList.add('scrolled');
                } else {
                    header.classList.remove('scrolled');
                }
            });

            // 项目卡片点击效果
            const heritageCards = document.querySelectorAll('.heritage-card-premium');
            heritageCards.forEach(card => {
                card.addEventListener('click', function() {
                    // 这里可以添加点击后的跳转或展开详情功能
                    console.log('点击了项目卡片:', this.querySelector('.heritage-title').textContent);
                });
            });
        });
    </script>
</body>
</html> 